<script setup lang="ts">
import { reactive } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import useStore from '@/stores'


const { homeStore } = useStore()

const config = reactive({
    isFloatOpen: true
})
</script>
<template>
    <div class="pf side-float" :class="{'open' : config.isFloatOpen}">
        <img :src="homeStore.sideFloat.bg" class="side-float-bg" alt="测边栏浮窗背景">
        <a href="javascript:;" class="pa switch" :class="{'open' : config.isFloatOpen}" @click="config.isFloatOpen = !config.isFloatOpen">
            <img :src="homeStore.sideFloat.switchOpen" alt="展开">
            <img :src="homeStore.sideFloat.switchClose" alt="收起">
        </a>
        <div class="pa side-float-box">
            <div class="pr qrcode-box">
                <div class="qrcode-container">
                    <vue-qr
                        :text="homeStore.sideFloat.qrData"
                        :logo-src="homeStore.navInfo.logo"
                        :size="150"
                        :logo-scale="0.25"
                        :logo-margin="0"
                        :correct-level="3"
                        :margin="5"
                        level="H"
                        :bind-element="true"
                    />
                </div>
                <img :src="homeStore.sideFloat.qrLineImg" class="pa qr-line" alt="">
            </div>
            <p>{{homeStore.sideFloat.qrText}}</p>
            <div class="act-icon">
                <a href="javascript:;" v-for="(item, index) in homeStore.sideFloat.actIcon" :key="`actIcon${index}`" :title="item.title">
                    <img :src="item.img" alt="">
                    <img :src="item.imgHover" alt="">
                </a>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '@/assets/styles/home_pc.scss';
</style>
